<template>
    <el-container>
    <el-header>
      <top_menu />
    </el-header>
        <el-main>
            <el-calendar ref="calendar">
                <template #header="{ date }">
                    <span>{{ date }}</span>
                    <el-button type="primary">新建任务</el-button>
                </template>
                <template #date-cell="{data}">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(2)[0] }}
                    
                    {{ data.isSelected ? '✔️' : '' }}
                    <!-- <el-badge :value="12" v-if="data.isSelected"></el-badge> -->
                    </p>
                </template>
            </el-calendar>
        </el-main>

        <el-footer></el-footer>
    </el-container>
    
  </template>
  


<script lang="ts" setup>
  import top_menu from '../../components/top_menu.vue'
  import { ref } from 'vue'
  import 'dayjs/locale/zh-cn'
  import type { CalendarDateType, CalendarInstance } from 'element-plus'

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

</script>


  